<template>
  <section class="m-home-floor-item">
    <!-- 横排三个层 -->
    <article class="three-picture" v-if="ofloor.wide_template == 'wide_adv_rectangle_four'">
      <article-title :color="color" :title="ofloor.gf_name"></article-title>
      <div class="three-picture-item">
        <img v-for="(img, index) in ofloor.goodsFloor.goodsList" :key="index" @click="onToLink(img)" v-lazy="img.src">
      </div>
    </article>

    <!-- 商品列表层 -->
    <article class="goods-list" v-if="ofloor.wide_template == 'wide_goods1'">
      <yd-list theme="1">
        <yd-list-item v-for="(goods, index) in ofloor.goodsFloor.goodsList" :key="index" @click.native="onToLink(goods, ofloor.goodsFloor)">
          <img slot="img" v-lazy="goods.path">
          <p slot="title" class="goods-name">{{goods.goods_name}}</p> 
          <p slot="other" class="yd-price"><em>¥</em>{{goods.goods_price | currency}}</p>
        </yd-list-item>
      </yd-list>
    </article>

    <!-- 广告列表 -->
    <article class="adver-list" v-if="ofloor.wide_template == 'wide_adv_goods'">
      <div class="adver-list-big">
        <img v-lazy="ofloor.goodsFloor.advList[0].src" @click="onToLink(ofloor.goodsFloor.advList[0])">
      </div>
      <div class="adver-picture-items">
        <div v-for="(goods, index) in ofloor.goodsFloor.goodsList" :key="index" @click="onToLink(goods, ofloor.goodsFloor)" class="adver-picture-item">
          <img slot="img" v-lazy="goods.goods_img">
          <div class="goods-detail">
            <p>{{goods.goods_name}}</p>
            <p><em>¥</em>{{goods.goods_price}}</p>
          </div>
        </div>
        <div class="adver-picture-item">
          <h3>查看更多</h3>
          <h3>View More</h3>
        </div>
      </div>
    </article>

    <!-- 广告 -->
    <article class="adver-list" v-if="ofloor.wide_template == 'wide_adv_only'">
      <div class="adver-list-big" @click="onToLink(ofloor.goodsFloor.advList[0])">
        <img v-lazy="ofloor.goodsFloor.advList[0].src">
      </div>
    </article>
  </section>
</template>

<script>
  import ArticleTitle from './articleTitle'

  export default {
    props: {
      ofloor: [Object]
    },
    data() {
      return {
        myFloor: {},
        color: '#323232'
      }
    },
    created() {
      console.log(this.ofloor, 3333)
    },
    methods: {
      onToLink(result, type) {
        if (type) {
          if (type.wide_template === 'wide_goods1' || type.wide_template === 'wide_adv_goods') {
            this.$router.push(`/goods/${result.id}`)
            return
          }
          return
        }
        switch (result.url_type) {
          case 'goods': // 进入商品详情
            this.$router.push(`/goods/${result.goodsId}`)
            break
          case 'goodsList': // 进入商品列表
            this.$router.push(`/goodslist?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'channel': // 频道
            this.$router.push(`/channel/${result.channelId}`)
            break
          case 'store': // 进入店铺
            this.$router.push(`/shop/${result.value}`)
            break
          case 'link': // 进入链接
            window.location.href = result.value
            break
          case 'keyWords': // 商品关键字搜索
            this.$router.push(`/search/goods?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'storeSearch': // 搜索店铺
            this.$router.push(`/search/store?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'brandSearch': // 品牌关键字搜索
            this.$router.push(`/search/brand?keyword=${encodeURIComponent(result.value)}`)
            break
        }
      }
    },
    components: {
      ArticleTitle
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .m-home-floor-item {
    .yd-list-theme1 {
      background: #fff;
    }
    article {
      margin-bottom: .2rem;
    }
    .three-picture {
      background: #fff;
      overflow: hidden;
      padding-bottom: 0.1rem;
      .three-picture-item {
        @include flex();
        padding: 0 0.16rem;
        width: 100%;
        height: 100%;
        img {
          display: block;
          width: 32%;
          height: 3rem;
          border: 1px solid #ddd;
          padding: 0.1rem;
        }
      }
    }
    .goods-list {
      .yd-list-item {
        padding-bottom: 0.2rem;
        div {
          padding: 0 0.2rem;
          border: 1px solid #ddd;
        }
        .yd-list-mes {
          padding: 0.15rem 0;
          border-top: 0px;
          div {
            border: 0;
          }
        }
      }
      .goods-name {
        text-align: center;
      }
      .yd-price {
        display:block;
        text-align: center;
        color: #ef5c6e;
      }
    }
    .adver-list {
      background-color: #fff;
      margin-top: .2rem;
      .adver-list-big {
        width: 100%;
        height: 4rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .adver-picture-items {
        display: -webkit-box !important;
        display: box !important;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        .adver-picture-item {
          width: 2.4rem;
          padding: 0.1rem;
          h3 {
            color: #898989;
            font-size: 0.24rem;
            text-align: center;
            margin: auto;
            item: center;
            &:nth-child(1) {
              padding-top: calc(100%/2 - 0.15rem);
              padding-bottom: 0.2rem;
            }
          }
          p {
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap !important;
            outline: 0 !important;
            &:nth-child(2) {
              color: #ef5c6e;
            }
          }
          img {
            width: 100%;
          }
        }
      }
    }
    .hotcategory {
      .list {
        overflow: hidden;
        background: #fff;
        border-left: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
      }
      .item {
        float: left;
        width: 33.3%;
        height: 2.2rem;
        overflow: hidden;
        border-right: 1px solid #eaeaea;
        border-top: 1px solid #eaeaea;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .m-all-img-item {
      position: relative;
      height: 5.06rem;
      .yd-list-img {
        position: absolute;
        left: .1rem;
        right: .1rem;
        height: 5.06rem;
      }
    }
  }
</style>
